<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>personRegist</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<style>
  #personRegistInfo{
    background:url(../../image/loginBg.png) no-repeat center;
    background-size: 100% 100%;
  }
  .logintitle{
    text-align: center;
    font-weight: bold;
  }
        .login-third {
            margin-top: 3rem;
        }
      .login-input {
          text-indent: 5px;

        }
        .aui-list{
              background-color:rgba(255, 255, 255, 0);
        }
        .aui-list.aui-form-list .aui-list-item:active {
            background-color: rgba(255, 255, 255, 0);
        }
        .aui-list .aui-list-item{
          letter-spacing: 2px;
          margin: 0 0 0px 28px;
          height: 56px;
          line-height: 56px;
          font-size: 17px;
          padding-left: 0;
          border-bottom: 1px solid rgba(204,204,204,.2);
           background-image: -webkit-linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
           background-image: linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
        }
        .aui-list .aui-list-item:first-child,
        .aui-list .aui-list-item:last-child{
          height: 79px;
        }
        @media screen and (-webkit-min-device-pixel-ratio: 1.5){
          .aui-list {
              background-image:linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
          }
        }
        .aui-btn-block{
          width: 90%;
          margin:0 auto;
        }
        .aui-content-padded.login-third{
          margin: 0;
        }
        .loginOpert .creatOrforget{
          padding: 0.2rem 0;
        }
        .loginOpert .creatOrforget:first-child{
          text-align: left;
          padding-left: 29px;
        }
        .loginOpert .creatOrforget:last-child{
          text-align: right;
          padding-right: 29px;
        }
        .logintitle {
          height: 69px;
          margin: 57px 0 9px 0;
        }
        .logintitle span{
          width: 34px;
          height: 69px;
          background: url(../../image/regist@2x.png) no-repeat center;
          background-size: 100% 100%;
        }
        .loninBtnse{
                margin: 26px 0 23px 0;
        }
        .loninBtn{
          height: 40px!important;
          line-height: 40px!important;
          width: 245px;
          background: url(../../image/registBtn@2x.png) no-repeat center;
          background-size: 100%;
          background-color: rgba(255, 255,255, 0) !important;
        }
        .getVilidCode{
          float: right;
          text-align: right;
          font-size: 17px;
          color: rgb(150, 150, 150) !important;
          background-color: rgba(255, 255,255, 0)!important;
          padding-right: 0;
        }
        .login-input{
          font-size: 17px;
        }
        .aui-list.aui-form-list {
          border-top:none!important;
        }
        .exsit{
          text-align: center;
          color: #969696;
        }
        .rightArrow {
          float: right;
          width: 8px;
          height: 15px;
          margin: 6px 0 0 5px;
        }
        .rightPic{
          width: 55px;
          height: 55px;
          float: right;
          margin-top: -15px;
        }
        .rightPic img{
          width: 55px;
          height: 55px;
          border-radius: 50%;
        }
        .rightCheck{
          width: 55px;
          height: 55px;
          font-size: 15px;
          padding-left: 5px;
          text-align: center;
          line-height: 55px;
          margin-top: -15px;
          float: right;
          position: relative;
          z-index: 1;
          text-indent: 0;
          margin-right: 10px;
         }
         .registFav{
           margin-left: 28px;
         }
         .registFav h2{
           font-size: 16px;
           letter-spacing: 2px;
         }
         .registFav ul{
           height: auto;
           display: flex;
           flex-wrap: wrap;
           margin-top: 10px;
         }
         .registFav li{
           float: left;
           padding-right: 30px;
           font-size: 16px;
           color: #969696;
           letter-spacing: 2px;
           line-height: 28px;
         }
         .rightCheck input{
           width: 55px;
           height: 55px;
           position: absolute;
           left: 0;
           top: 0;
           z-index: 5;
           background-color: rgba(255, 255, 255, 0);
           border: none;
         }
         .sexCheck:checked{
           background: url(../../image/sexCheck@2x.png) no-repeat -5px center;
           background-size: 115%;
           background-color:rgba(255, 255, 255, 0);
           border: none;
         }
         .sexCheck:before,
         .sexCheck:after {
           border: none!important;
         }
         .agreen{
            width: 14px;
            height: 14px;
            margin-top: 3px;
            border-color: #E50013;
          }
         .agreen:checked{
           background: url(../../image/checked@2x.png) no-repeat center;
           background-size: 115%;
           background-color:rgba(255, 255, 255, 0);
           border: none;
         }
         .agreen:before,
         .agreen:after {
           border: none!important;
         }
         .aui-margin-r-15{
           margin-right: 23px !important;
         }
         .niColor{
           color: #000!important;
         }
         /*适配屏幕320px*/
         @media (max-width: 320px){
           .logintitle span {
               width: 23px;
               height: 46px;
           }
           .logintitle {
                margin: 58px 0 9px 0;
            }
            .aui-list .aui-list-item,
            .getVilidCode,
            .rightCheck,
             .registFav h2,
             .registFav li,
             .exsit{
              font-size: 12px;
            }
            .aui-list .aui-list-item{
              height: 37px;
              line-height: 37px;
            }
            .aui-list .aui-list-item:first-child,
            .aui-list .aui-list-item:last-child {
              height: 57px;
              line-height: 57px;
            }
            .rightPic img ,.rightPic{
                width: 37px;
                height: 37px;
            }
            .rightPic {
                margin-top: -5px;
            }
            .rightArrow {
                width: 5px;
                height: 10px;
                margin: 10px 0 0 5px;
            }
            .rightCheck {
                width: 38px;
                height: 38px;
                line-height: 38px;
                margin-right: 6px;
                margin-top: -5px;
            }
            .rightCheck input {
                width: 38px;
                height: 38px;
            }
            .registFav li {
                line-height: 20px;
            }
            .agreen {
                margin: 1px 3px 0 0;
            }
       	}
         /*适配屏幕320px*/
	</style>
</head>
<body>
  <div id="personRegistInfo" v-bind:style="{height:wHeight}">
    <section class="aui-content aui-margin-t-15">
      <h1 class="logintitle"><span></span></h1>
        <ul class="aui-list aui-form-list ">
            <li class="aui-list-item" v-on:click="selectUserPic()">
              <div class="aui-list-item-label color-orange">
                  头像
              </div>
                <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                    <div class="aui-btn  getVilidCode" style="width: 8rem;">
                      <img src="../../image/getin@2x.png" class="rightArrow"/>
                      <div  class="rightPic"><img :src="upLoadPic"/></div>

                    </div>
                </div>
            </li>
            <li class="aui-list-item" v-on:click="editUserNiname()">
              <div class="aui-list-item-label  color-orange">
                  昵称
              </div>
                    <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                        <div class="aui-btn  getVilidCode" style="width: 8rem;" v-bind:class="{niColor:black}">
                          {{palcehoderNi}}
                           <img src="../../image/getin@2x.png" class="rightArrow"/>
                        </div>
                    </div>
            </li>
            <li class="aui-list-item">
              <div class="aui-list-item-label  color-orange">
                  性别
              </div>
              <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;margin-right: 0!important;">
                  <div class="aui-btn  getVilidCode" style="width: 8rem;">
                      <div  class="rightCheck " v-bind:class="{niColor:index == sexIndex }" v-for="(sexItem,index) in sexList">{{sexItem.sex}}
                         <input class="aui-radio sexCheck" type="radio" name="demo"  v-on:change="selectSex(index)">
                      </div>
                    <!-- <img src="../image/uplaodPic@2x.png"/> -->
                   </div>
                  </div>
            </li>
        </ul>
    </section>
    <section class="aui-content-padded registFav">
      <h2>选择感兴趣的活动</h2>
      <ul>
         <li v-for="(interestItem,index) in interestList" @click="selectInterest(index)" v-bind:class="{niColor:interestItem.status == true }">{{interestItem.interest}}</li>
      </ul>
    </section>
    <section class="aui-content-padded loninBtnse">
        <div class="aui-btn aui-btn-block  aui-btn-sm loninBtn" @click="subInfo()"></div>
    </section>
     <section class="aui-content-padded login-third loginOpert">
        <div class="aui-grid" style="background: none;">
            <div class="aui-row">
                <div class="aui-col exsit">
                    <input class="aui-radio agreen" type="radio" name="demo3" ref="isChecked" @change=agreement()>
                  <span style="margin-left: -4px;"> 点击即表示同意</span><span style="color:#E50013">《用户注册协议》</span>
                </div>
            </div>
        </div>
    </section>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        api.addEventListener({
            name: 'personRegistInfo'
        }, function(ret, err) {
            app.palcehoderNi = ret.value.NiName;////编辑昵称页面传来昵称
            app.black = ret.value.staut;/////编辑昵称页面传来状态
        });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#personRegistInfo',
        data: {
            wHeight: '',
            upLoadPic : "../../image/uplaodPic@2x.png",////头像选取路径
            upLoadPicSrc : '',
            palcehoderNi : '请输入昵称',/////用户昵称
            black : false,
            sexIndex : '-1',
            sex : '0',////默认性别为0，男为1，女为2
            sexList : [
              {sex : "男"},{sex : "女"}
            ],
            interestList : [
              {interest:'有团队',status:false},{interest:'钢琴弹奏',status:false},{interest:'吉他弹奏',status:false},{interest:'活动礼仪',status:false},
              {interest:'活动主持',status:false},{interest:'活动策划',status:false},{interest:'古筝演奏',status:false},{interest:'小提琴演奏',status:false}
            ],
            selectInterestList : [],
            selectInteresArr : [],///用户选的兴趣
            isAgreement : '',////同意协议
            custmoerType : $api.getStorage('customerType'),
            imgToken : ''
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            //////选择性别
            selectSex : function(n){
                if(n == 0){
                    this.sex = "1";
                    this.sexIndex = n;
                }else{
                  this.sex = "2";
                  this.sexIndex = n;
                }
            },
            //////选择兴趣
            selectInterest : function(index){
                 this.interestList[index].status = !this.interestList[index].status;
                 if(this.interestList[index].status){
                    this.selectInteresArr.push(this.interestList[index].interest);////已选的兴趣
                 }
                 /////去掉重复选项
                 Array.prototype.unique2 = function(){
                   var _this = this;
                   _this.sort(); //先排序
                   var res = [_this[0]];
                       for(var i = 1; i < _this.length; i++){
                           if(_this[i] !== res[res.length - 1]){
                                res.push(_this[i]);
                           }
                       }
                       this.selectInteresArr = res;
                       return res;
                 }
                 this.selectInteresArr.unique2();
            },
            agreement : function(){
              this.isAgreement = this.$refs.isChecked.value;////同意值为on
            },
            //////点击修改头像弹出底部菜单
            selectUserPic : function(){
              infoMethod.getToken();
              api.actionSheet({
                title: '',
                cancelTitle: '取消',
                destructiveTitle: '',
                buttons: ['从相册中选取', '拍照']
              }, function(ret, err) {
                var index = ret.buttonIndex;
                if(index == 1){
                   infoMethod.gotoLogin_checkPic();
                }else if(index == 2){
                   infoMethod.gotoLogin_takePhoto();
                }
              });
            },
            //////点击修改昵称
            editUserNiname : function(){
                   bf_common_view.bf_win.openWin('login_resetNiName', '../login/');
            },
            ////点击注册按钮提交
            subInfo : function(){
                 infoMethod.subInfoMethod();
                 api.showProgress({
                     title: '',
                     text: '正在提交...',
                     modal: false
                 });
            }
        },
        mounted:function(){
            this.init();
        }
    });

    var imgCp = "";
    var infoMethod = {
        gotoLogin_checkPic : function(){
          // bf_common_view.bf_win.openWin('login_checkPic', '../login/');
           api.getPicture({
               sourceType: 'library',
               mediaValue: 'pic',
               destinationType: 'url',
               allowEdit: true,
               quality: 50,
               targetWidth: 200,
               targetHeight: 300,
               saveToPhotoAlbum: false
           }, function(ret, err) {
               if (ret) {
               app.upLoadPic = ret.data;
               infoMethod.changeImg();
               }
           });
        },
        gotoLogin_takePhoto : function(){
          api.getPicture({
              sourceType: 'camera',
              mediaValue: 'pic',
              destinationType: 'url',
              allowEdit: true,
              quality: 50,
              targetWidth: 100,
              targetHeight: 100,
              saveToPhotoAlbum: false
          }, function(ret, err) {
              if (ret) {
                  app.upLoadPic = ret.data;
                  infoMethod.changeImg();
              }
          });
        },
        /////提交所有信息
        subInfoMethod : function(){
           $c.ajax({
               url: 'User/save',
               method:'post',
               values:{
                   usertype : app.custmoerType ,
                   nickname : app.palcehoderNi,
                   sex : app.sex,
                   interest_tag : app.selectInteresArr.join(','),
                   avatar : app.upLoadPicSrc,
               },
               need_login : true ,
               success: function(ret) {
                 if(ret) {
                    //console.log(JSON.stringify(ret));
                    api.hideProgress();//关闭等待框
                    bf_common_view.bf_win.popToast("提交成功!");
                    bf_common_view.bf_win.openWin('login_pwd', '../login/');
                    setTimeout(function(){
                       api.closeWin();
                    },800)
                 }
               },
               err:function(err){
                 api.hideProgress();//关闭等待框
                 bf_common_view.bf_win.popToast("提交失败！");
                console.log(JSON.stringify(err));
               }
           });
        },
        ///获取文件上传token
        getToken : function(){
          $c.ajax({
              url: 'File/uploadToken',
              method:'get',
              need_login : true ,
              success: function(ret) {
                if(ret) {
                  app.imgToken = ret.uptoken;
                  //// console.log(ret.uptoken);
                }
              },
              err:function(err){
               console.log(JSON.stringify(err) + "err");
              }
          });
        },
       ///////将图片转为base64
        changeImg: function() {
          var trans = api.require('trans');
          trans.decodeImgToBase64({
            imgPath: app.upLoadPic
          }, function(ret, err) {
            if (ret.status) {
                imgCp = ret.base64Str;
                infoMethod.upImg();
            } else {
                alert(JSON.stringify(err));
            }
          });
        },
        ////////上传图片到七牛，获得图片地址
       upImg : function(){
         var idx = imgCp.indexOf("base64,");
         if (idx != -1) {
            imgCp = imgCp.substring(idx+7);
         }
         var num = fileSize(imgCp);
         var pic = imgCp;
         var url = "http://up-na0.qiniup.com/putb64/-1/"; //非华东空间需要根据注意事项 1 修改上传域名
         var xhr = new XMLHttpRequest();
         xhr.onreadystatechange=function(){
           if (xhr.readyState==4){
               var ret = xhr.responseText;
               var idx1 = ret.indexOf("http");
               var idx2 = ret.indexOf('"}');
               var val = ret.substring(idx1, idx2);
               val = val.replace(/[\'\"\\\\]/g, '');
               //val的值就是图片的网址
               console.log(val);
               app.upLoadPicSrc = val;
           }
         }
         xhr.open("POST", url, true);
         xhr.setRequestHeader("Content-Type", "application/octet-stream");
         xhr.setRequestHeader("Authorization", "UpToken " + app.imgToken);
         xhr.send(pic);
       	}
    }
    /////获得图片大小
    function fileSize(str) {
  	    var fileSize;
  	    //找到等号，把等号也去掉
  	    if (str.indexOf('=') > 0) {
  	       var indexOf = str.indexOf('=');
  	       str = str.substring(0, indexOf);//把末尾的’=‘号去掉
  	     }
  	    fileSize = parseInt(str.length - (str.length / 8) * 2);
  	    return fileSize;
  	}
</script>
</html>
